<template>
  <div class="box">
      <div class="header">
         <!-- <router-view name="HeaderView"></router-view> -->
        <!-- 导航栏 -->
        <van-icon class="navLeft" name="arrow-left" size="25" @click="onClickLeft"/>
        <van-search class="navCenter" v-model="value" shape="round" background="aqua" placeholder="请输入搜索关键词" @click="onSeek"/>
        <van-icon class="navRight" name="scan" size="25"/>

      </div>
    <div class="main">
      <!-- 左侧分类列表 -->
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item"
            v-for="(item, index) in classifyList"
            :key="index"
            @click="onChange(index)"
          />
        </van-sidebar>
      </div>
      <!-- 产品分类下的品牌 -->
      <div class="right">
        <van-grid :column-num="3" :gutter="15">
          <van-grid-item
            icon="photo-o"
            :text="item.brand"
            v-for="(item, index) in brands"
            :key="index"
            @click="dianBrand(index)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Sidebar, SidebarItem, Grid, GridItem,Search, } from "vant";
import { fenList, brandList, prolist } from "../api/kind";

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Search);

export default {
  name: "KindView",
  components: {},
  data() {
    return {
      activeKey: 0,
      classifyList: [],
      brands: [],
      value:'',
    };
  },
  methods: {
    onChange(index) {
      let category = this.classifyList[index];
      brandList({ category: category }).then((res) => {
        // console.log(res.data.data);
        this.brands = res.data.data;
      });
    },
    dianBrand(index) {
      // console.log(index);
      prolist({
        count: 1,
        limitNum: 10,
        category: this.classifyList[this.activeKey],
        brand: this.brands[index].brand,
      }).then((res) => {
        console.log(res.data.data);
        let bra = res.data.data;
        this.$router.push({ path: '/class',query:{maths:bra}})
      });
    },
    onClickLeft() {
      this.$router.push('/home')
    },
    onSeek() {
    this.$router.push('/search')
    },
  },
  created() {
    fenList().then((res) => {
      // console.log(res.data.data);
      this.classifyList = res.data.data;
    });
  }
};
</script>

<style scoped>
.main {
  display: flex;
  justify-content: flex-start;
}
.main .left {
  flex-wrap: 1;
  overflow-y: auto;
}
.main .right {
  width: 3.5rem;
}
.header {
  display: flex;
  justify-content: space-around;
  line-height: .3rem;
}
.navLeft {
  margin-left: .0125rem;
}
.navRight {
  margin-right: .0125rem;
}
</style>